<template>
    <div class="top-header">
        <section>
            <h1>叩丁狼电商运营平台</h1>
            <el-icon>
                <Grid />
            </el-icon>
        </section>

        <el-dropdown @command="commandHandle">
            <span class="el-dropdown-link">
                {{userStore.username}}
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="home">首页</el-dropdown-item>
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                    <!-- <el-dropdown-item disabled>Action 4</el-dropdown-item>
                    <el-dropdown-item divided>Action 5</el-dropdown-item> -->
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store';
import { ArrowDown, Grid } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const userStore = useUserStore()

const commandHandle = (cmd: string) => {
    switch (cmd) {
        case "home":
            router.push("/index");
            break;
        case "logout":
            localStorage.removeItem("token");

            router.push("/login");


            userStore.activemenus.forEach(item => {
                router.removeRoute(item.name)
            });
            userStore.menus = [];
            userStore.username = "";
            break;
    }
}

</script>

<style lang="less" scoped>
.top-header {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    section {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-icon {
            color: #fff;
            font-size: 26px;
        }
    }

    h1 {
        font-size: 26px;
        margin: 0;
        margin-right: 40px;
    }
}
</style>